<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <pager :total="total" @page-change="getData"></pager>
  <send-btn></send-btn>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script>
  //跳秒组件
  const send = {
    data(){
      return {
        interval:{},
        interCount:'发送'
      }
    },
    props:{
      count:{
        type:Number,
        default:60,
        required:true
      }
    },
    created(){
      console.log("组件创建")
    },
    methods:{
      send(){
        this.interCount = this.count;
        this.interval = setInterval(()=>{
          if(this.interCount<=0){
            this.interCount = "重新发送";
            clearInterval(this.interval)
          }
          if(this.interCount >0){
            this.interCount--;
          }

        },1000)
      }
    },
    template:`<input type="button" @click="send" v-model="interCount"/>`
  }

  //分布组件
  const pager = {
    data(){
      return{
        curPage:4,
        pre1:0,
        pre2:0,
        next1:0,
        next2:0,
        goto:''
      }
    },
    props:{
      total:{
        type:Number,
        default:1
      },
      pageChange:{
        type:Function,
        default: function(){
          console.log("no change function")
        }
      }
    },
    watch:{
      curPage(page){
        this.pre1= page -1;
        this.pre2 = page -2;
        this.next1 = page +1;
        this.next2 = page +2;
        //触发一个自定义事件,把当前页传递给父组件
        this.$emit('pageChange',page)
      }
    },
    methods:{
      pre(){
        this.curPage--;
        if(this.curPage<=1){
          this.curPage = 1;
        }
      },
      next(){
        this.curPage++;
        if(this.curPage>=this.total){
          this.curPage = this.total;
        }
      },
      skip(){
        if(this.goto>=this.total){
          this.curPage = this.total;
          return;
        }
        if(this.goto <= 1){
          this.curPage = 1;
          return;
        }
        this.curPage = parseInt(this.goto);
      }

    },
    mounted(){
      this.curPage = 1;
    },
    template:`
      <div>
    <input type="button" @click="curPage = 1" value="首页">
    <input type="button" :disabled="curPage <=1" @click="pre" value="前一页">
    <input type="button" v-show="(curPage-2)>0" v-model="pre2" @click="curPage = pre2">
    <input type="button" v-show="(curPage-1)>0" v-model="pre1" @click="curPage = pre1">
    <input class="cur" type="button" v-model="curPage">
    <input type="button" v-show="(total-curPage)>=1" v-model="next1" @click="curPage = next1">
    <input type="button" v-show="(total-curPage)>=2" v-model="next2" @click="curPage = next2">
    <input type="button" :disabled="curPage>=total" @click="next" value="下一页">
    <input type="button" @click="curPage=total" value="尾页">
    <input class="pageInput" type="number" v-model="goto">
    <button @click="skip">跳转</button>
  </div>
    `
  }
  const app = {
    //注册组件
    components:{
      'pager':pager,//把分页组件注册到当前组件
      'sendBtn':send
    },
    data(){
      return{
        total:30
      }
    },
    methods:{
      getData(page){
        console.log("页面变化"+page);
      }
    }
  }
  Vue.createApp(app)
  .mount("#app")
</script>
</html>